<template>
  <div class="M4">
    <!-- <div class="time">
      <el-date-picker
        clearable
        v-model="timeValue[0]"
        type="date"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        placeholder="开始日期"
        @change="(date:string)=>{
          handDateChange(date,'')
        }"
      />
      <div class="til">至</div>
      <el-date-picker
        clearable
        v-model="timeValue[1]"
        type="date"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
        placeholder="结束时间"
        @change="(date:string)=>{
          handDateChange('',date)
        }"
      />
    </div> -->
    <top
      @change="warningChange"
      :adcode="adcode"
      :timeValue="timeValue"
      :classId="classId"
      ref="topRef"
    />
    <div class="center">
      <left
        :adcode="adcode"
        :timeValue="timeValue"
        :warningId="warningId"
        :classId="classId"
        @change="handPieChange"
        ref="leftRef"
      />
      <f-map
        @change="handelChange"
        :adCode="adcode"
        :timeValue="timeValue"
        :warningId="warningId"
        :classId="classId"
        ref="fmapRef"
      />
      <right
        :adcode="adcode"
        :timeValue="timeValue"
        :classId="classId"
        ref="rightRef"
      />
    </div>
    <!-- <bottom :adcode="adcode" :timeValue="timeValue" /> -->
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, computed, watch } from 'vue'
import { getDefaultDate } from '@/utils/date'
import { useStore } from 'vuex'
import Top from './cpns/Top.vue'
import Left from './cpns/left.vue'
import fMap from './cpns/map.vue'
import Right from './cpns/Right.vue'
// import Bottom from './cpns/Bottom.vue'
export default defineComponent({
  name: 'M4',
  // components: { Top, Left, Right, Bottom, fMap },
  components: { Top, Left, Right, fMap },
  setup() {
    const store = useStore()
    const topRef = ref()
    const leftRef = ref()
    const fmapRef = ref()
    const rightRef = ref()
    const watchedState = computed(() => Object.values(store.state.globalDate))
    watch(watchedState, () => {
      topRef.value?.refreshData()
      leftRef.value?.refreshData()
      fmapRef.value?.refreshData()
      rightRef.value?.refreshData()
    })
    const timeValue = ref(getDefaultDate(30))
    const adcode = ref('')
    const classId = ref('')
    const warningId = ref('')
    const bgImage = (e: any) => {
      return require(`../../assets/images/M4/icons${e}.png`)
    }
    // 地图adcode
    const handelChange = (adcodeId: string) => {
      adcode.value = adcodeId
    }
    const warningChange = (warnId: string) => {
      warningId.value = warnId
    }
    const handPieChange = (classCode: string) => {
      classId.value = classCode
    }
    const handDateChange = (sta: string, end: string) => {
      sta && (timeValue.value = [sta, timeValue.value[1]])
      end && (timeValue.value = [timeValue.value[0], end])
    }
    return {
      timeValue,
      adcode,
      classId,
      warningId,
      bgImage,
      handPieChange,
      handelChange,
      warningChange,
      handDateChange,
      topRef,
      leftRef,
      fmapRef,
      rightRef
    }
  }
})
</script>
<style lang="less" scoped>
.M4 {
  height: 100%;
  .time {
    display: flex;
    align-items: center;
    padding: 0 30px;
    width: 1920px;
    height: 36px;
    margin-left: -30px;
    border: 1px solid #0068b7;
    border-right: 0;
    border-left: 0;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0),
      rgba(0, 104, 183, 0.4),
      rgba(0, 104, 183, 0.4)
    );
    z-index: 11;
    align-items: baseline;
    .til {
      white-space: nowrap;
      text-align: right;
      color: rgba(255, 255, 255, 0.8);
      margin: 0px 10px;
    }
  }
  .center {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
  }
  :deep(.el-input__inner) {
    // width: 615px;
    height: 30px;
    border-radius: 15px;
    border: 1px solid #217aff;
    background-color: transparent;
    box-shadow: none;
    text-align: center;
    // color: rgba(255, 255, 255, 0.8);
    color: #ffffff;
    font-size: 20px;
    font-weight: normal;
    background: transparent;
    &:focus {
      box-shadow: none !important;
    }
  }
  :deep(.el-date-editor .el-range__icon) {
    font-size: 18px;
    color: #3459a3;
  }
  // 选择的时间背景
  :deep(.el-date-editor .el-range-input) {
    color: #ffffff;
    font-size: 20px;
    font-weight: normal;
    background: transparent;
  }
  :deep(.el-date-editor .el-range-separator) {
    color: #ffffff;
    font-size: 20px;
    font-weight: normal;
  }
}
</style>
<style>
/* 时间段的背景色 */
.el-date-table td.in-range .el-date-table-cell {
  background-color: rgba(255, 255, 255, 0.1);
}
.el-date-table td.in-range .el-date-table-cell:hover {
  background: rgba(255, 255, 255, 0.3);
}
</style>
